<template>
  <el-dialog v-model="showDialog" :title="title" destroy-on-close width="500px">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      style="padding: 10px"
    >
      <el-form-item label="任务名称" prop="sumo_name">
        <el-input v-model="form.sumo_name" placeholder="请输入任务名称" />
      
      </el-form-item>
      <el-form-item
        label="路网文件"
        prop="webFileList"
        v-if="usePage !== 'flowManage' && usePage !== 'checkManage'"
      >
        <UploadFile></UploadFile><span style="text-indent: 10px;">{{ form.sumo_network }}</span>
      </el-form-item>
      <el-form-item
        label="车辆文件"
        prop="vehicleFileList"
        v-if="usePage !== 'roadWebManage' && usePage !== 'checkManage'"
      >
        <UploadFile></UploadFile><span style="text-indent: 10px;">{{ form.sumo_flow }}</span>
      </el-form-item>
      <el-form-item
        label="检测器文件"
        prop="vehicleFileList"
        v-if="usePage == 'checkManage' || usePage == 'sumoManage'"
      >
      <UploadFile></UploadFile><span style="text-indent: 10px;">{{ form.sumo_detector }}</span>
      </el-form-item>
      <el-form-item
        label="算法名称"
        prop="sumo_algorithm"
        v-if="
          usePage !== 'flowManage' &&
          usePage !== 'roadWebManage' &&
          usePage !== 'checkManage'
        "
      >
        <el-select v-model="form.sumo_algorithm" class="m-2" placeholder="请输入算法名称" size="large">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleConfirm">确定</el-button>
        <el-button type="primary" @click="handleCancle"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { onMounted, reactive, ref, toRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { vehicleData } from "@/types/vehecle";
import { addVehicleData, editVehicleData } from "@/api/sumo";
import UploadFile from "@/components/UploadFile.vue";

interface RuleForm {
  sumo_name: "";
  sumo_algorithm: "";
  webFileList: [];
  vehicleFileList: [];
  sumo_network:'',
  sumo_detector:'',
  sumo_flow:""
}
let { usePage } = defineProps(["usePage"]);
let emit = defineEmits(["getList", "editData"]);
const ruleFormRef = ref<FormInstance>();
let form = reactive({
  sumo_name: "",
  webFileList: [],
  vehicleFileList: [],
  sumo_algorithm: "",
});
const options = [
  {
    value: 'DQN',
    label: 'DQN',
  },
  {
    value: 'D3QN',
    label: 'D3QN',
  },
  {
    value: 'D3RQN',
    label: 'D3RQN',
  },
  {
    value: 'PD3RQN',
    label: 'PD3RQN',
  },
  {
    value: 'PPO',
    label: 'PPO',
  },
  {
    value: 'DDPG',
    label: 'DDPG',
  },
  {
    value: 'SAC',
    label: 'SAC',
  },
  {
    value: 'MBPO',
    label: 'MBPO',
  },
]
const rules = reactive<FormRules<RuleForm>>({
  sumo_name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
  sumo_algorithm: [
    { required: true, message: "请输入算法名称", trigger: "blur" },
  ],
  webFileList: [{ required: true, message: "请上传路网文件" }],
  vehicleFileList: [{ required: true, message: "请上传车辆文件" }],
});

const title = ref();
const showDialog = ref(false);
const rowId = ref();

function getData(row: vehicleData) {
  title.value = row.modalTitle;
  form.sumo_name = row.sumo_name;
  form.sumo_algorithm = row.sumo_algorithm;
  form.sumo_network=row.sumo_network
  form.sumo_detector=row.sumo_detector
  form.sumo_flow=row.sumo_flow
  rowId.value = "";
  showDialog.value = true;

  if (row.id) {
    rowId.value = row.id;
  }
}
const handleConfirm = () => {
  showDialog.value = false;
  let data: any = { ...form };
  if (rowId.value) {
    data.sumo_id = rowId.value;
    editVehicleData(rowId.value, { ...data }).then((res: any) => {
      if (res.status == "success") {
        emit("getList");
      }
    });
    return;
  }
  addVehicleData({ ...form }).then((res: any) => {
    if (res.status == "success") {
      emit("getList");
    }
  });
};
const handleCancle = () => {
  showDialog.value = false;
};

// 上传文件
const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};
const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};
const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};
const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};

defineExpose({ showDialog, form, getData });
</script>

<style scoped lang="scss">
</style>
